<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY) {
            const headlen = 10; // length of head in pixels
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Set styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = '18px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Coordinates for the cuboid vertices
        const P = { x: 130, y: 135 };
        const Q = { x: 330, y: 115 };
        const R = { x: 400, y: 60 };
        const S = { x: 200, y: 80 };
        const J = { x: 130, y: 235 };
        const K = { x: 330, y: 215 };
        const L = { x: 400, y: 160 };
        const M = { x: 200, y: 180 };

        // --- Draw the cuboid ---

        // Draw solid lines (visible edges)
        ctx.beginPath();
        // Front face
        ctx.moveTo(P.x, P.y);
        ctx.lineTo(Q.x, Q.y);
        ctx.lineTo(K.x, K.y);
        ctx.lineTo(J.x, J.y);
        ctx.closePath();
        // Top face
        ctx.moveTo(P.x, P.y);
        ctx.lineTo(S.x, S.y);
        ctx.lineTo(R.x, R.y);
        ctx.lineTo(Q.x, Q.y);
        // Right face
        ctx.moveTo(Q.x, Q.y);
        ctx.lineTo(R.x, R.y);
        ctx.lineTo(L.x, L.y);
        ctx.lineTo(K.x, K.y);
        ctx.stroke();

        // Draw dashed lines (hidden edges)
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        // Back-left vertical edge
        ctx.moveTo(S.x, S.y);
        ctx.lineTo(M.x, M.y);
        // Bottom-back edge
        ctx.moveTo(M.x, M.y);
        ctx.lineTo(L.x, L.y);
        // Bottom-left edge
        ctx.moveTo(J.x, J.y);
        ctx.lineTo(M.x, M.y);
        // Internal diagonal
        ctx.moveTo(M.x, M.y);
        ctx.lineTo(Q.x, Q.y);
        ctx.stroke();
        
        // Reset to solid lines
        ctx.setLineDash([]);


        // --- Add vertex labels ---
        ctx.fillText('P', P.x - 15, P.y);
        ctx.fillText('Q', Q.x + 15, Q.y);
        ctx.fillText('R', R.x + 15, R.y);
        ctx.fillText('S', S.x, S.y - 15);
        ctx.fillText('J', J.x - 15, J.y);
        ctx.fillText('K', K.x + 15, K.y + 5);
        ctx.fillText('L', L.x + 15, L.y);
        ctx.fillText('M', M.x - 15, M.y);
        
        // --- Draw electron movement arrows and label ---
        drawArrow(130, 280, 70, 300);
        drawArrow(110, 260, 50, 280);

        ctx.textAlign = 'left';
        ctx.font = '16px Arial';
        ctx.fillText('direction of', 20, 320);
        ctx.fillText('movement of', 20, 340);
        ctx.fillText('electrons', 20, 360);

        // --- Draw magnetic field arrows and label ---
        drawArrow(460, 110, 420, 110);
        drawArrow(460, 130, 420, 130);
        drawArrow(460, 150, 420, 150);

        ctx.textAlign = 'left';
        ctx.fillText('magnetic flux', 470, 120);
        ctx.fillText('density B', 470, 140);

        // --- Add figure label ---
        ctx.textAlign = 'center';
        ctx.font = '16px Arial';
        ctx.fillText('Fig. 8.1', canvas.width / 2, 420);
    </script>
</body>
</html>